<template>
  <div class="room-detail-container">
    <!-- 子导航栏 -->
    <div class="room-detail-wrapper">
      <!-- 左侧编辑区域 -->
      <div class="room-detail-card">
        <div class="room-detail-header">
          <div class="room-title">
            {{ roomId==0 ? '新增房间' : '编辑房间' }}
          </div>
        </div>
        <div class="room-detail-body">
          <el-tabs v-model="activeEditTab" type="card" class="edit-tabs" @tab-click="handleEditTabClick">
            <el-tab-pane label="基本信息" name="basic">
              <!-- 基本信息 -->
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="房间主图">
                  <div class="main-image-tip">上传房间主图，建议尺寸 1200×800，图片清晰美观</div>
                  <div class="image-upload-list">
                    <div v-for="(item, index) in roomData.mainImages" :key="index" class="image-thumb">
                      <img :src="item.url || item" />
                      <i class="el-icon-error btndel" @click="handleRemoveMainImg(index)"></i>
                    </div>
                    <div class="upload-thumb" @click="modalPicTap('2')">
                      <i class="el-icon-plus"></i>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="房间标题">
                  <el-input v-model="roomData.title" placeholder="输入房间标题" maxlength="50" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="房间标签">
                  <div class="feature-tags">
                    <el-tag v-for="(tag, index) in roomData.tags" :key="index" closable @close="removeTag(index)">{{ tag
                    }}</el-tag>
                    <el-input class="tag-input" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
                      @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 新增标签</el-button>
                  </div>
                </el-form-item>

                <el-form-item label="房间地址">
                  <div class="address-display">
                    <div class="address-text">{{ roomData.address }}</div>
                    <div class="distance-text">{{ roomData.distance }}</div>
                    <el-tooltip content="地址信息由系统根据位置自动生成，不可手动修改" placement="top">
                      <i class="el-icon-info address-info"></i>
                    </el-tooltip>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="房屋特色" name="features">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="推荐理由">
                  <el-input v-model="roomData.recommendReason" placeholder="例如：私家花园 享自然生活"></el-input>
                </el-form-item>
                <el-form-item label="特色标签">
                  <div class="feature-tags">
                    <el-tag v-for="(tag, index) in roomData.featureTags" :key="index" closable
                      @close="removeFeatureTag(index)">{{ tag }}</el-tag>
                    <el-input class="tag-input" v-if="featureInputVisible" v-model="featureInputValue"
                      ref="saveFeatureTagInput" size="small" @keyup.enter.native="handleFeatureInputConfirm"
                      @blur="handleFeatureInputConfirm"></el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showFeatureInput">+ 新增特色</el-button>
                  </div>
                </el-form-item>
                
                <!-- 动态房屋特色列表 -->
                <el-form-item label="房屋特色" required>
                  <div class="feature-tip">请至少添加一个房屋特色，突出房屋亮点</div>
                  <div class="house-features">
                    <div v-for="(feature, index) in roomData.houseFeatures" :key="`feature-${index}`" 
                         class="house-feature-item"
                         :class="{ 'feature-item-new': feature.isNew, 'feature-item-editing': feature.isEditing }">
                      <div class="feature-header">
                        <span class="feature-index">
                          <i class="el-icon-star-on" v-if="feature.isNew"></i>
                          特色 {{ index + 1 }}
                          <el-tag v-if="feature.isNew" type="success" size="mini" effect="plain">新增</el-tag>
                        </span>
                        <div class="feature-actions">
                          <el-button 
                            v-if="!feature.isEditing" 
                            type="primary" 
                            size="mini" 
                            icon="el-icon-edit" 
                            circle
                            @click="editFeature(index)"
                            title="编辑此特色">
                          </el-button>
                          <el-button 
                            v-if="feature.isEditing" 
                            type="success" 
                            size="mini" 
                            icon="el-icon-check" 
                            circle
                            @click="saveFeature(index)"
                            title="保存此特色">
                          </el-button>
                          <el-button 
                            v-if="roomData.houseFeatures.length > 1" 
                            type="danger" 
                            size="mini" 
                            icon="el-icon-delete" 
                            circle
                            @click="removeHouseFeature(index)"
                            title="删除此特色">
                          </el-button>
                        </div>
                      </div>
                      
                      <!-- 预览模式 -->
                      <div v-if="!feature.isEditing" class="feature-preview">
                        <div class="preview-content" @click="editFeature(index)">
                          <div class="preview-name">{{ feature.name || '点击编辑特色名称' }}</div>
                          <div class="preview-desc">{{ feature.description || '点击添加特色描述' }}</div>
                          <div class="preview-images" v-if="feature.images && feature.images.length > 0">
                            <img v-for="(img, imgIndex) in feature.images.slice(0, 3)" 
                                 :key="imgIndex" 
                                 :src="img.url || img" 
                                 class="preview-img">
                          </div>
                          <div class="preview-placeholder" v-else>
                            <i class="el-icon-picture-outline"></i>
                            <span>点击添加特色图片</span>
                          </div>
                        </div>
                      </div>
                      
                      <!-- 编辑模式 -->
                      <div v-if="feature.isEditing" class="feature-edit">
                        <el-form-item label="特色名称" required>
                          <el-input 
                            v-model="feature.name" 
                            :ref="`featureName${index}`"
                            placeholder="输入特色名称，如：落地窗、免费停车、私家花园"
                            maxlength="20"
                            show-word-limit
                            @keyup.enter.native="saveFeature(index)">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="特色描述">
                          <el-input 
                            v-model="feature.description" 
                            placeholder="输入特色描述，如：观蓝天白云"
                            maxlength="50"
                            show-word-limit
                            @keyup.enter.native="saveFeature(index)">
                          </el-input>
                        </el-form-item>
                        <el-form-item label="特色图片">
                          <div class="image-upload-list">
                            <div v-for="(item, imgIndex) in feature.images" :key="`img-${imgIndex}`" class="image-thumb">
                              <img :src="item.url || item" />
                              <i class="el-icon-error btndel" @click="handleRemoveFeatureImg(index, imgIndex)"></i>
                            </div>
                            <div class="upload-thumb upload-thumb-active" @click="modalPicTap('feature', index)">
                              <i class="el-icon-plus"></i>
                              <span>添加图片</span>
                            </div>
                          </div>
                          <div class="upload-tips">
                            <span>建议上传1-3张图片，展示特色亮点</span>
                          </div>
                        </el-form-item>
                        <div class="edit-actions">
                          <el-button size="small" @click="cancelEdit(index)">取消</el-button>
                          <el-button type="primary" size="small" @click="saveFeature(index)">保存</el-button>
                        </div>
                      </div>
                    </div>
                    <div class="add-feature-button">
                      <el-button type="primary" icon="el-icon-plus" @click="addHouseFeature">添加房屋特色</el-button>
                      <span class="add-tip">（最多可添加5个特色）</span>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="入住须知" name="notice">
              <el-form label-position="top" label-width="100px" class="edit-form">
                
                <el-form-item label="入住规则">
                  <div class="notice-rules">
                    <div v-for="(rule, index) in roomData.noticeRules" :key="index" class="notice-rule-item">
                      <div class="notice-rule-header">
                        <span class="notice-rule-index">规则 {{ index + 1 }}</span>
                        <el-button type="danger" size="mini" icon="el-icon-delete" circle
                          @click="removeNoticeRule(index)"></el-button>
                      </div>
                      <el-form-item label="规则名称">
                        <el-input v-model="rule.name" placeholder="输入规则名称，如押金、加人"></el-input>
                      </el-form-item>
                      <el-form-item label="规则内容">
                        <el-input v-model="rule.content" placeholder="输入规则内容"></el-input>
                      </el-form-item>
                    </div>
                    <el-button type="primary" icon="el-icon-plus" @click="addNoticeRule">添加规则</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="价格说明">
                  <el-input type="textarea" v-model="roomData.priceNotice" :rows="5" placeholder="输入价格说明"></el-input>
                </el-form-item>
                <el-form-item label="位置信息">
                  <div class="location-info">
                    <el-form-item label="详细地址">
                      <el-input v-model="roomData.location.address" placeholder="输入详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="周边地点">
                      <div class="nearby-pois">
                        <div v-for="(poi, index) in roomData.location.pois" :key="index" class="nearby-poi-item">
                          <el-form-item label="地点名称">
                            <el-input v-model="poi.name" placeholder="输入地点名称"></el-input>
                          </el-form-item>
                          <el-form-item label="距离">
                            <el-input v-model="poi.distance" placeholder="输入距离，如直线距离1.1km"></el-input>
                          </el-form-item>
                          <el-button type="danger" size="mini" icon="el-icon-delete"
                            @click="removePoi(index)"></el-button>
                        </div>
                        <el-button type="primary" size="small" icon="el-icon-plus" @click="addPoi">添加周边地点</el-button>
                      </div>
                    </el-form-item>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="服务设施" name="facilities">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="服务">
                  <div class="facilities-section">
                    <div class="facilities-tip">选择提供的服务项目</div>
                    <div class="facilities-grid">
                      <div v-for="(item, index) in roomData.serviceFacilities" :key="index" 
                           class="facility-item" 
                           :class="{ active: item.available }"
                           @click="toggleServiceFacility(index)">
                        <i class="el-icon-check" v-if="item.available"></i>
                        <i class="el-icon-close" v-else></i>
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                    <div class="add-facility">
                      <el-input v-if="showServiceInput" 
                               v-model="newServiceFacility" 
                               placeholder="输入新的服务项目"
                               size="small"
                               @keyup.enter.native="addServiceFacility"
                               @blur="addServiceFacility">
                        <el-button slot="append" @click="addServiceFacility">添加</el-button>
                      </el-input>
                      <el-button v-else size="small" type="text" @click="showServiceInput = true">
                        <i class="el-icon-plus"></i> 添加服务项目
                      </el-button>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="基础设施">
                  <div class="facilities-section">
                    <div class="facilities-tip">选择房间基础设施</div>
                    <div class="facilities-grid">
                      <div v-for="(item, index) in roomData.basicFacilities" :key="index" 
                           class="facility-item" 
                           :class="{ active: item.available }"
                           @click="toggleBasicFacility(index)">
                        <i class="el-icon-check" v-if="item.available"></i>
                        <i class="el-icon-close" v-else></i>
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                    <div class="add-facility">
                      <el-input v-if="showBasicInput" 
                               v-model="newBasicFacility" 
                               placeholder="输入新的基础设施"
                               size="small"
                               @keyup.enter.native="addBasicFacility"
                               @blur="addBasicFacility">
                        <el-button slot="append" @click="addBasicFacility">添加</el-button>
                      </el-input>
                      <el-button v-else size="small" type="text" @click="showBasicInput = true">
                        <i class="el-icon-plus"></i> 添加基础设施
                      </el-button>
                    </div>
                  </div>
                </el-form-item>

                <el-form-item label="卫浴设施">
                  <div class="facilities-section">
                    <div class="facilities-tip">选择卫浴相关设施</div>
                    <div class="facilities-grid">
                      <div v-for="(item, index) in roomData.bathroomFacilities" :key="index" 
                           class="facility-item" 
                           :class="{ active: item.available }"
                           @click="toggleBathroomFacility(index)">
                        <i class="el-icon-check" v-if="item.available"></i>
                        <i class="el-icon-close" v-else></i>
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                    <div class="add-facility">
                      <el-input v-if="showBathroomInput" 
                               v-model="newBathroomFacility" 
                               placeholder="输入新的卫浴设施"
                               size="small"
                               @keyup.enter.native="addBathroomFacility"
                               @blur="addBathroomFacility">
                        <el-button slot="append" @click="addBathroomFacility">添加</el-button>
                      </el-input>
                      <el-button v-else size="small" type="text" @click="showBathroomInput = true">
                        <i class="el-icon-plus"></i> 添加卫浴设施
                      </el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="价格设置" name="price">
              <el-form label-position="top" label-width="100px" class="edit-form">
                <el-form-item label="当前价格">
                  <el-input-number v-model="roomData.price" :min="0" :step="1"
                    controls-position="right"></el-input-number>
                  <span class="price-unit">元/晚</span>
                </el-form-item>
                <el-form-item label="原价">
                  <el-input-number v-model="roomData.originalPrice" :min="0" :step="1"
                    controls-position="right"></el-input-number>
                  <span class="price-unit">元/晚</span>
                </el-form-item>
                <el-form-item label="折扣">
                  <el-input-number v-model="roomData.discount" :min="0" :max="10" :precision="1"
                    :step="0.1"></el-input-number>
                  <span class="price-unit">折</span>
                </el-form-item>
                
              </el-form>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>

      <!-- 右侧手机预览区域 -->
      <div class="phone-preview">
        <!-- 操作按钮区域 -->
        <div class="preview-actions">
          <el-button type="primary" @click="save_Room">保存</el-button>
          <el-button @click="goBack">退出</el-button>
        </div>
        <div class="phone-header">
          <span>10:29</span>
          <span>94% <i class="el-icon-mobile-phone"></i></span>
        </div>
        <div class="phone-container" @scroll="handleScroll" ref="phoneContainer">
          <div class="phone-content">
            <!-- 顶部标签导航 - 固定在顶部 -->
            <div class="phone-top-nav">
              <div class="phone-back-icon">
                <i class="el-icon-arrow-left"></i>
              </div>
              <div class="phone-top-title">{{ currentTabName }}</div>
              <div class="phone-top-actions">
                <i class="el-icon-star-off"></i>
                <i class="el-icon-share"></i>
                <span class="more-dots">•••</span>
                <span class="circle-icon">⦿</span>
              </div>
            </div>

            <!-- 标签导航 - 可横向滚动，点击时会滚动到对应区域 -->
            <div class="phone-tab-nav">
              <div v-for="tab in tabs" :key="tab.id" class="phone-tab-item" :class="{ active: activeTab === tab.id }"
                @click="scrollToSection(tab.id)">
                {{ tab.name }}
              </div>
            </div>

            <!-- 概览区域 - id为对应的section标识 -->
            <div id="overview-section" class="phone-section">
              <!-- 顶部图片 -->
              <div class="phone-top-image">
                <img src="https://picsum.photos/id/1019/800/600" alt="房间照片" />
              </div>

              <!-- 房间信息卡片 -->
              <div class="phone-room-card">
                <div class="phone-room-title">
                  {{ roomData.title || '【才村/龙塘码头】顺柿亲子房+设计师院落，独立咖啡厅；出门200米龙塘码头+网红打卡' }}
                </div>

                <div class="phone-room-tag-main">
                  <span class="tag-main">优选民宿</span>
                  <span class="desc">干净卫生有亮点，入住不满意必赔</span>
                </div>

                <div class="phone-room-tags">
                  <span class="phone-tag" v-for="(tag, index) in roomData.tags" :key="index">{{ tag }}</span>
                </div>

                <div class="phone-score-address">

                  <div class="phone-address">
                    {{ roomData.address }}
                  </div>
                  <div class="phone-distance">
                    <span class="distance-text">{{ roomData.distance }}</span>
                    <span class="map-link">地图</span>
                  </div>
                </div>
              </div>

              <!-- 房屋特色 -->
              <div class="phone-features">
                <div class="feature-title">房屋特色</div>
                <div class="feature-recommend">
                  <span class="recommend-label">推荐理由：</span>
                  <span class="recommend-content">"{{ roomData.recommendReason || '私家花园 享自然生活' }}"</span>
                </div>

                <!-- 动态显示房屋特色 -->
                <div class="feature-item" v-for="(feature, index) in roomData.houseFeatures" :key="index" v-if="feature.name">
                  <div class="feature-item-title">{{ feature.name }}</div>
                  <div class="feature-item-desc">{{ feature.description }}</div>
                  <div class="feature-item-image" v-if="feature.images && feature.images.length > 0">
                    <img :src="feature.images[0].url || feature.images[0]" :alt="feature.name" />
                  </div>
                </div>
              </div>
            </div>



            <!-- 服务设施标签页 -->
            <div id="facilities-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">服务设施</div>

              <div class="phone-facilities">
                <div class="facilities-main-section">
                  <div class="facilities-main-title">服务/设施</div>
                  
                  <div class="facilities-category">
                    <div class="facilities-category-title">服务</div>
                    <div class="facilities-items-grid">
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.serviceFacilities.filter(f => f.available)" :key="'service-' + index">
                        <i class="facility-icon-circle success">✓</i>
                        <span class="facility-name-inline">{{ facility.name }}</span>
                      </div>
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.serviceFacilities.filter(f => !f.available)" :key="'service-disabled-' + index">
                        <i class="facility-icon-circle muted">✗</i>
                        <span class="facility-name-inline muted">{{ facility.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="facilities-category">
                    <div class="facilities-category-title">基础</div>
                    <div class="facilities-items-grid">
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.basicFacilities.filter(f => f.available)" :key="'basic-' + index">
                        <i class="facility-icon-circle success">✓</i>
                        <span class="facility-name-inline">{{ facility.name }}</span>
                      </div>
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.basicFacilities.filter(f => !f.available)" :key="'basic-disabled-' + index">
                        <i class="facility-icon-circle muted">✗</i>
                        <span class="facility-name-inline muted">{{ facility.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="facilities-category">
                    <div class="facilities-category-title">卫浴</div>
                    <div class="facilities-items-grid">
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.bathroomFacilities.filter(f => f.available)" :key="'bathroom-' + index">
                        <i class="facility-icon-circle success">✓</i>
                        <span class="facility-name-inline">{{ facility.name }}</span>
                      </div>
                      <div class="facility-item-inline" v-for="(facility, index) in roomData.bathroomFacilities.filter(f => !f.available)" :key="'bathroom-disabled-' + index">
                        <i class="facility-icon-circle muted">✗</i>
                        <span class="facility-name-inline muted">{{ facility.name }}</span>
                      </div>
                    </div>
                  </div>

                  <div class="facilities-view-all">
                    全部设施 >
                  </div>
                </div>
              </div>
            </div>

            <!-- 房东介绍标签页 -->
            <div id="landlord-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">房东</div>

              <div class="phone-landlord">
                <div class="landlord-info">
                  <img
                    :src="roomData.landlord.avatar && roomData.landlord.avatar.length > 0 ? roomData.landlord.avatar[0].url : 'https://picsum.photos/id/1005/100/100'"
                    class="landlord-avatar" alt="房东头像">
                  <div class="landlord-detail">
                    <div class="landlord-name">{{ roomData.landlord.name }}</div>
                    <div class="landlord-desc">{{ roomData.landlord.description }}</div>
                  </div>
                  <div class="landlord-contact">
                    <button class="contact-btn">联系房东</button>
                  </div>
                </div>

                <div class="landlord-stats">
                  <div class="stat-item">
                    <div class="stat-value">{{ roomData.landlord.positiveRate }}%</div>
                    <div class="stat-label">好评率</div>

                  </div>
                  <div class="stat-item">
                    <div class="stat-value">{{ roomData.landlord.confirmRate }}%</div>
                    <div class="stat-label">订单确认率</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 费用须知标签页 -->
            <div id="notice-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">须知</div>

              <div class="phone-notice">
                <div class="notice-section">
                  <div class="notice-desc">以下规则由房东制定，请仔细阅读并遵守</div>

                  <div class="notice-item" v-for="(rule, index) in roomData.noticeRules" :key="index">
                    <div class="notice-label">{{ rule.name }}</div>
                    <div class="notice-value">{{ rule.content }}</div>
                  </div>

                  <div class="notice-more">
                    全部须知 >
                  </div>
                </div>

                <div class="notice-section">
                  <div class="notice-title">价格说明</div>
                  <div class="notice-content">
                    {{ roomData.priceNotice }}
                  </div>
                </div>

                <div class="notice-section">
                  <div class="notice-title">位置</div>
                  <div class="notice-map">
                    <img
                      :src="roomData.location.mapImage && roomData.location.mapImage.length > 0 ? roomData.location.mapImage[0].url : 'https://picsum.photos/id/1028/600/300'"
                      alt="地图" class="map-image">
                    <div class="map-address">
                      <div class="map-icon">📍</div>
                      <div class="map-text">{{ roomData.location.address }}</div>
                      <div class="map-copy">复制</div>
                    </div>

                    <div class="map-tabs">
                      <div class="map-tab">交通</div>
                      <div class="map-tab active">景点</div>
                      <div class="map-tab">购物</div>
                    </div>

                    <div class="map-pois">
                      <div class="map-poi" v-for="(poi, index) in roomData.location.pois" :key="index">
                        <div class="poi-name">{{ poi.name }}</div>
                        <div class="poi-distance">{{ poi.distance }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空白区域，防止底部导航遮挡内容 -->
              <div style="height: 70px;"></div>
            </div>

            <!-- 房源标签页 -->
            <div id="rooms-section" class="phone-section">
              <div class="section-divider"></div>
              <div class="section-title">房源</div>

              <div class="phone-recommend">
                <div class="recommend-title">
                  <span>周边民宿推荐</span>
                  <span class="recommend-more">查看全部</span>
                </div>

                <div class="recommend-list">
                  <div class="recommend-card" v-for="(room, index) in roomData.nearbyRooms" :key="index">
                    <div class="recommend-image">
                      <img
                        :src="room.images && room.images.length > 0 ? room.images[0].url : 'https://picsum.photos/id/1040/300/200'"
                        alt="推荐房间">
                    </div>
                    <div class="recommend-distance">{{ room.distance }}</div>
                    <div class="recommend-name">{{ room.name }}</div>

                    <div class="recommend-tags">
                      <div class="recommend-tag" v-for="(tag, tagIndex) in room.tags.split(',')" :key="tagIndex">{{ tag
                      }}</div>
                    </div>
                    <div class="recommend-price">
                      <span class="recommend-current">¥{{ room.price }}</span>
                      <span class="recommend-original">¥{{ room.originalPrice }}</span>
                      <span class="recommend-discount">{{ room.discount }}折</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 空白区域，防止底部导航遮挡内容 -->
              <div style="height: 70px;"></div>
            </div>

            <!-- 底部栏 -->
            <div class="phone-bottom-bar">
              <div class="bottom-user">
                <img
                  :src="roomData.landlord.avatar && roomData.landlord.avatar.length > 0 ? roomData.landlord.avatar[0].url : 'https://picsum.photos/id/1005/40/40'"
                  alt="头像" class="user-avatar" />
                <span class="user-consult">咨询</span>
              </div>

              <div class="bottom-price">
                <div class="price-amount">¥{{ roomData.price }}</div>
                <div class="price-desc">共2晚 {{ roomData.bookingDate && roomData.bookingDate.length > 1 ?
                  roomData.bookingDate[0] + ' — ' + roomData.bookingDate[1] : '2025-— 2025-—' }}</div>
              </div>

              <div class="bottom-book-btn">
                立即预订
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadImg from '@/components/uploadImg';
import { roomCreate, roomDetail,roomUpdate } from "@/api/mings";

export default {
  name: 'RoomTitleDetail',
  props: {},
  data() {
    return {
      roomId: null,
      isNew: false,
      roomTitle: '',
      // 手机预览激活的标签
      activeTab: 'overview',
      // 标签列表
      tabs: [
        { id: 'overview', name: '概览' },
        { id: 'rooms', name: '房源' },

        { id: 'facilities', name: '设施' },
        { id: 'landlord', name: '房东' },
        { id: 'notice', name: '须知' }
      ],
      // 保存各个区域的位置信息
      sectionPositions: {},
      // 是否正在通过点击Tab导航进行滚动
      isScrollingToSection: false,
      // 房间特色数据
      roomFeatures: {
        recommendReason: '私家花园 享自然生活',
        freeParking: true
      },
      featureTags: ['观蓝天白云', '私家花园', '独立院落'],
      inputVisible: false,
      inputValue: '',
      windowImageList: [{
        name: 'window.jpg',
        url: 'https://picsum.photos/id/1019/600/400'
      }],
      parkingImageList: [{
        name: 'parking.jpg',
        url: 'https://picsum.photos/id/1018/600/400'
      }],
      // 新增编辑数据
      roomData: {
        title: '',
        tags: ['优选民宿', '干净卫生'],

        address: '大理市, 大理州大理市柿野SHIYI...',
        distance: '距才村直线3.4公里',
        recommendReason: '私家花园 享自然生活',
        featureTags: ['观蓝天白云', '私家花园', '独立院落'],
        hasWindow: true,
        freeParking: true,
        windowImages: [],
        parkingImages: [],
        // 新增动态房屋特色数组
        houseFeatures: [
          {
            name: '落地窗',
            description: '观蓝天白云',
            images: [],
            isEditing: false,
            isNew: false
          },
          {
            name: '免费停车',
            description: '有免费停车场',
            images: [],
            isEditing: false,
            isNew: false
          }
        ],
        nearbyRooms: [
          {
            name: '【才村/高铁站】大理&顺柿精品院落|独立花园家庭影院',
            images: [{
              name: 'nearby1.jpg',
              url: 'https://picsum.photos/id/1040/300/200'
            }],
            distance: '距离1.3km',
            score: 5.0,
            scoreCount: 112,
            tags: '别墅,设计师房',
            price: 468,
            originalPrice: 568,
            discount: 8.2
          },
          {
            name: '【环境清幽】大理洱海临海小木屋|湖景小院，超近洱海',
            images: [{
              name: 'nearby2.jpg',
              url: 'https://picsum.photos/id/1041/300/200'
            }],
            distance: '距离1.8km',
            score: 4.9,
            scoreCount: 98,
            tags: '木屋,湖景,情侣首选',
            price: 528,
            originalPrice: 698,
            discount: 7.6
          }
        ],
        scoreDetails: {
          description: 4.9,
          location: 5.0,
          convenience: 5.0,
          service: 5.0,
          cleanliness: 5.0,
          value: 5.0
        },
        reviews: [
          {
            username: 'j***5',
            avatar: [{
              name: 'reviewer1.jpg',
              url: 'https://picsum.photos/id/1001/40/40'
            }],
            date: '2025-03-01',
            content: '酒店特别好，服务很好，离海边很近，还有下午茶',
            images: [
              { name: 'review1.jpg', url: 'https://picsum.photos/id/1019/150/100' },
              { name: 'review2.jpg', url: 'https://picsum.photos/id/1018/150/100' }
            ]
          },
          {
            username: 't***8',
            avatar: [{
              name: 'reviewer2.jpg',
              url: 'https://picsum.photos/id/1002/40/40'
            }],
            date: '2025-02-15',
            content: '环境很棒，老板人很热情，周围环境很安静，适合度假',
            images: []
          }
        ],
        serviceFacilities: [
          { name: '免费停车位', available: true },
          { name: '付费停车位', available: false },
          { name: '行李寄存', available: false }
        ],
        basicFacilities: [
          { name: '无线网络', available: true },
          { name: '电梯', available: false },
          { name: '窗户', available: true }
        ],
        bathroomFacilities: [
          { name: '热水', available: true },
          { name: '独立卫浴', available: true },
          { name: '电吹风', available: true }
        ],
        landlord: {
          name: '小张民宿',
          avatar: [{
            name: 'landlord.jpg',
            url: 'https://picsum.photos/id/1005/100/100'
          }],
          description: '自然人房东 实名验证 5套房屋',
          contact: '13800138000',
          positiveRate: 100,
          confirmRate: 100
        },
        noticeRules: [
          { name: '押金', content: '免押入住，订房更轻松' },
          { name: '加人', content: '标准入住3人，不可加人' }
        ],
        priceNotice: '划线价格为参考价，该价格指商品或服务的门市价、服务提供商的指导价、零售价或该商品或服务曾经展示过的销售价等，并非原价；由于产品信息实时更新、市场价格波动等可能会与您预订时展示的不一致，该价格仅供您参考。未划线价格指商品或服务的实时价格，为划线价格基础上计算出的优惠金额。具体成交价格根据商品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。如有疑问，您可在预订前联系客服进行咨询。此说明仅当出现价格比较时有效。若服务提供商单独对划线价格进行说明的，以服务提供商的表述为准。',
        location: {
          address: '大理州大理市柿野SHIYE-日落天台岸...',
          mapImage: [],
          pois: [
            { name: '龙塘码头-观景台', distance: '直线距离785m' },
            { name: '龙塘村', distance: '直线距离1.1km' },
            { name: '才村', distance: '直线距离3.4km' }
          ]
        },
        price: 868,
        originalPrice: 1000,
        discount: 8.7,
        bookingDate: ['2025-04-01', '2025-04-05'],
        mainImages: [], // 必须是数组
      },
      activeEditTab: 'basic', // 新增：控制编辑区域当前激活的标签页
      inputVisible: false, // 新增：控制基本信息标签页的输入框可见性
      inputValue: '', // 新增：基本信息标签页的输入框值
      featureInputVisible: false, // 新增：控制房屋特色标签页的输入框可见性
      featureInputValue: '', // 新增：房屋特色标签页的输入框值
      featureTags: ['观蓝天白云', '私家花园', '独立院落'], // 新增：房屋特色标签
      roomFeatures: { // 新增：房屋特色数据
        recommendReason: '私家花园 享自然生活',
        freeParking: true
      },
      windowImageList: [],
      parkingImageList: [],
      nearbyRooms: [ // 新增：周边房源列表
        {
          name: '【才村/高铁站】大理&顺柿精品院落|独立花园家庭影院',
          images: [{
            name: 'nearby1.jpg',
            url: 'https://picsum.photos/id/1040/300/200'
          }],
          distance: '距离1.3km',

          tags: '别墅,设计师房',
          price: 468,
          originalPrice: 568,
          discount: 8.2
        },
        {
          name: '【环境清幽】大理洱海临海小木屋|湖景小院，超近洱海',
          images: [{
            name: 'nearby2.jpg',
            url: 'https://picsum.photos/id/1041/300/200'
          }],
          distance: '距离1.8km',

          tags: '木屋,湖景,情侣首选',
          price: 528,
          originalPrice: 698,
          discount: 7.6
        }
      ],

      serviceFacilities: [ // 新增：服务类设施列表
        { name: '免费停车位', available: true },
        { name: '付费停车位', available: false },
        { name: '行李寄存', available: false }
      ],
      basicFacilities: [ // 新增：基础设施列表
        { name: '无线网络', available: true },
        { name: '电梯', available: false },
        { name: '窗户', available: true }
      ],
      bathroomFacilities: [ // 新增：卫浴设施列表
        { name: '热水', available: true },
        { name: '独立卫浴', available: true },
        { name: '电吹风', available: true }
      ],
      landlord: { // 新增：房东信息
        name: '小张民宿',
        avatar: [{
          name: 'landlord.jpg',
          url: 'https://picsum.photos/id/1005/100/100'
        }],
        description: '自然人房东 实名验证 5套房屋',
        contact: '13800138000',
        positiveRate: 100,
        confirmRate: 100
      },
      noticeRules: [ // 新增：入住须知规则列表
        { name: '押金', content: '免押入住，订房更轻松' },
        { name: '加人', content: '标准入住3人，不可加人' }
      ],
      priceNotice: '划线价格为参考价，该价格指商品或服务的门市价、服务提供商的指导价、零售价或该商品或服务曾经展示过的销售价等，并非原价；由于产品信息实时更新、市场价格波动等可能会与您预订时展示的不一致，该价格仅供您参考。未划线价格指商品或服务的实时价格，为划线价格基础上计算出的优惠金额。具体成交价格根据商品或服务参加活动，或会员使用优惠券等发生变化，最终以订单结算页价格为准。如有疑问，您可在预订前联系客服进行咨询。此说明仅当出现价格比较时有效。若服务提供商单独对划线价格进行说明的，以服务提供商的表述为准。',
      location: { // 新增：位置信息
        address: '大理州大理市柿野SHIYE-日落天台岸...',
        mapImage: [{
          name: 'map.jpg',
          url: 'https://picsum.photos/id/1028/600/300'
        }],
        pois: [
          { name: '龙塘码头-观景台', distance: '直线距离785m' },
          { name: '龙塘村', distance: '直线距离1.1km' },
          { name: '才村', distance: '直线距离3.4km' }
        ]
      },
      price: 868,
      originalPrice: 1000,
      discount: 8.7,
      bookingDate: ['2025-04-01', '2025-04-05'],
      mainImages: [ // 新增：房间主图列表
        {
          required: true,
          message: '请上传商品轮播图',
          type: 'array',
          trigger: 'change'
        }
      ],
      detailImages: [ // 新增：房间详情图列表
        { name: 'detail1.jpg', url: 'https://picsum.photos/id/1004/300/200' },
        { name: 'detail2.jpg', url: 'https://picsum.photos/id/1005/300/200' },
        { name: 'detail3.jpg', url: 'https://picsum.photos/id/1006/300/200' },
        { name: 'detail4.jpg', url: 'https://picsum.photos/id/1007/300/200' },
        { name: 'detail5.jpg', url: 'https://picsum.photos/id/1008/300/200' }
      ],
      dragging: null,
      // 服务设施编辑相关变量
      showServiceInput: false,
      newServiceFacility: '',
      showBasicInput: false,
      newBasicFacility: '',
      showBathroomInput: false,
      newBathroomFacility: '',
    };
  },
  computed: {
    currentTabName() {
      const tab = this.tabs.find(t => t.id === this.activeTab);
      return tab ? tab.name : '概览';
    }
  },
  created() {
    if (this.$route.params.id && this.$route.params.id !== 'new') {
      this.roomId = this.$route.params.id;
      this.getRoomDetail();
      this.isNew = false;
    } else {
      this.isNew = true;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calculateSectionPositions();
      window.addEventListener('resize', this.calculateSectionPositions);

      // 设置初始房间标题
      if (this.roomData.title === '') {
        this.roomData.title = '【才村/龙塘码头】顺柿亲子房+设计师院落，独立咖啡厅；出门200米龙塘码头+网红打卡';
      }
    });

    // 监听手机预览区的滚动事件
    const phoneContainer = document.querySelector('.phone-content-scroll');
    if (phoneContainer) {
      phoneContainer.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calculateSectionPositions);
    const phoneContainer = document.querySelector('.phone-content-scroll');
    if (phoneContainer) {
      phoneContainer.removeEventListener('scroll', this.handleScroll);
    }
  },
  methods: {
    getRoomDetail() {
      var that = this
      if(that.$route.params.id>0){
        roomDetail(this.roomId)
        .then(res => {
          console.log(res.data);
          that.roomData = res.data;
        })
        .catch(err => {
          that.$message.error('获取房间详情失败');
        });
      }

    },
    modalPicTap(type, featureIndex) {
      const _this = this;
      this.$modalUpload(function (img) {
        if (type === '2') {
          img.forEach(item => {
            console.log(item);
            _this.roomData.mainImages.push(item);
            if (_this.roomData.mainImages.length > 10) {
              _this.roomData.mainImages.length = 10;
            }
          });
        } else if (type === 'window') {
          img.forEach(item => {
            console.log(item);
            _this.roomData.windowImages.push(item);
            if (_this.roomData.windowImages.length > 1) {
              _this.roomData.windowImages.length = 1;
            }
          });
        } else if (type === 'parking') {
          img.forEach(item => {
            _this.roomData.parkingImages.push(item);
            if (_this.roomData.parkingImages.length > 1) {
              _this.roomData.parkingImages.length = 1;
            }
          });
        } else if (type === 'feature' && typeof featureIndex === 'number') {
          // 房屋特色图片上传
          img.forEach(item => {
            if (_this.roomData.houseFeatures[featureIndex]) {
              _this.roomData.houseFeatures[featureIndex].images.push(item);
              // 限制每个特色最多3张图片
              if (_this.roomData.houseFeatures[featureIndex].images.length > 3) {
                _this.roomData.houseFeatures[featureIndex].images.length = 3;
              }
            }
          });
        }
      }, type);
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleRemoveMainImg(index) {
      this.roomData.mainImages.splice(index, 1);
    },
    handleRemoveWindowImg(index) {
      this.roomData.windowImages.splice(index, 1);
    },
    handleRemoveParkingImg(index) {
      this.roomData.parkingImages.splice(index, 1);
    },

    handleDragOver(e) {
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = "move";
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.roomData.mainImages];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.roomData.mainImages = newItems;
    },
    initData() {
      // 从路由参数获取房间ID
      this.roomId = this.$route.params.id;
      this.isNew = this.roomId === 'new';

      if (!this.isNew) {
        // 如果是编辑已有房间，从后端获取数据
        // 模拟从后端获取数据
        // getRoomById(this.roomId).then(res => {
        //   this.roomData = res.data;
        // });
      }
    },
    calculateSectionPositions() {
      this.sectionPositions = {};
      const sections = ['overview', 'rooms', 'facilities', 'landlord', 'notice'];

      sections.forEach(sectionId => {
        const element = document.getElementById(`${sectionId}-section`);
        if (element) {
          // 获取每个区域相对于父元素的顶部偏移量
          const position = element.offsetTop;
          this.sectionPositions[sectionId] = position;
        }
      });
    },
    handleScroll(e) {
      if (this.isScrollingToSection) return;

      const scrollTop = e.target.scrollTop;
      const headerHeight = 44; // 手机顶部状态栏高度

      let activeSection = 'overview';

      // 根据滚动位置确定当前浏览的区域
      Object.entries(this.sectionPositions).forEach(([sectionId, position]) => {
        if (scrollTop + headerHeight >= position - 20) {
          activeSection = sectionId;
        }
      });

      if (this.activeTab !== activeSection) {
        this.activeTab = activeSection;

        // 确保选中的标签在视图中可见
        this.$nextTick(() => {
          const tabElement = document.querySelector(`.tab-item.${activeSection}`);
          if (tabElement) {
            tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
          }
        });
      }
    },
    scrollToSection(sectionId) {
      const phoneContainer = this.$refs.phoneContainer;
      const targetSection = document.getElementById(`${sectionId}-section`);

      if (phoneContainer && targetSection) {
        const headerHeight = 92; // 手机顶部导航栏高度 (顶部导航48px + 标签导航44px)
        this.isScrollingToSection = true;

        phoneContainer.scrollTo({
          top: targetSection.offsetTop - headerHeight,
          behavior: 'smooth'
        });

        this.activeTab = sectionId;

        // 滚动完成后恢复滚动监听
        setTimeout(() => {
          this.isScrollingToSection = false;
        }, 1000);
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.roomData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    removeTag(index) {
      this.roomData.tags.splice(index, 1);
    },
    // 房屋特色相关方法
    showFeatureInput() {
      this.featureInputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveFeatureTagInput.$refs.input.focus();
      });
    },
    handleFeatureInputConfirm() {
      let inputValue = this.featureInputValue;
      if (inputValue) {
        this.roomData.featureTags.push(inputValue);
      }
      this.featureInputVisible = false;
      this.featureInputValue = '';
    },
    removeFeatureTag(index) {
      this.roomData.featureTags.splice(index, 1);
    },
    // 房屋特色管理方法
    addHouseFeature() {
      // 确保 houseFeatures 数组存在
      if (!this.roomData.houseFeatures) {
        this.$set(this.roomData, 'houseFeatures', []);
      }
      
      // 限制最多5个特色
      if (this.roomData.houseFeatures.length >= 5) {
        this.$message.warning('最多只能添加5个房屋特色');
        return;
      }
      
      // 先保存当前正在编辑的特色
      this.saveAllEditingFeatures();
      
      // 使用 Vue.set 确保响应式
      const newFeature = {
        name: '',
        description: '',
        images: [],
        isEditing: true,
        isNew: true
      };
      
      this.$set(this.roomData.houseFeatures, this.roomData.houseFeatures.length, newFeature);
      
      // 自动聚焦到新增的输入框
      this.$nextTick(() => {
        const index = this.roomData.houseFeatures.length - 1;
        const refName = `featureName${index}`;
        if (this.$refs[refName] && this.$refs[refName][0]) {
          this.$refs[refName][0].focus();
        }
        
        // 滚动到新增的特色项
        const newFeatureElement = document.querySelector('.feature-item-new');
        if (newFeatureElement) {
          newFeatureElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      });
      
      this.$message.success('已添加新的房屋特色，请填写相关信息');
    },
    removeHouseFeature(index) {
      // 确保至少保留一个特色
      if (this.roomData.houseFeatures.length <= 1) {
        this.$message.warning('至少需要保留一个房屋特色');
        return;
      }
      
      this.$confirm('确定要删除这个房屋特色吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.roomData.houseFeatures.splice(index, 1);
        this.$message.success('删除成功');
      }).catch(() => {
        // 用户取消删除
      });
    },
    handleRemoveFeatureImg(featureIndex, imgIndex) {
      this.roomData.houseFeatures[featureIndex].images.splice(imgIndex, 1);
    },
    // 编辑特色
    editFeature(index) {
      // 先保存其他正在编辑的特色
      this.saveAllEditingFeatures();
      
      this.$set(this.roomData.houseFeatures[index], 'isEditing', true);
      
      // 聚焦到名称输入框
      this.$nextTick(() => {
        const refName = `featureName${index}`;
        if (this.$refs[refName] && this.$refs[refName][0]) {
          this.$refs[refName][0].focus();
        }
      });
    },
    // 保存特色
    saveFeature(index) {
      const feature = this.roomData.houseFeatures[index];
      
      // 验证名称不能为空
      if (!feature.name || feature.name.trim() === '') {
        this.$message.warning('请填写特色名称');
        return;
      }
      
      this.$set(this.roomData.houseFeatures[index], 'isEditing', false);
      this.$set(this.roomData.houseFeatures[index], 'isNew', false);
      
      this.$message.success('特色保存成功');
    },
    // 取消编辑
    cancelEdit(index) {
      const feature = this.roomData.houseFeatures[index];
      
      // 如果是新增的特色且没有填写名称，则删除
      if (feature.isNew && (!feature.name || feature.name.trim() === '')) {
        this.roomData.houseFeatures.splice(index, 1);
        this.$message.info('已取消添加');
        return;
      }
      
      this.$set(this.roomData.houseFeatures[index], 'isEditing', false);
      this.$set(this.roomData.houseFeatures[index], 'isNew', false);
    },
    // 保存所有正在编辑的特色
    saveAllEditingFeatures() {
      this.roomData.houseFeatures.forEach((feature, index) => {
        if (feature.isEditing) {
          if (feature.name && feature.name.trim() !== '') {
            this.$set(this.roomData.houseFeatures[index], 'isEditing', false);
            this.$set(this.roomData.houseFeatures[index], 'isNew', false);
          }
        }
      });
    },

    // 设施管理相关方法
    addFacility(list) {
      list.push({ name: '', available: true });
    },
    removeFacility(list, index) {
      list.splice(index, 1);
    },
    // 服务设施相关方法
    toggleServiceFacility(index) {
      this.roomData.serviceFacilities[index].available = !this.roomData.serviceFacilities[index].available;
    },
    addServiceFacility() {
      if (this.newServiceFacility.trim()) {
        this.roomData.serviceFacilities.push({
          name: this.newServiceFacility.trim(),
          available: true
        });
        this.newServiceFacility = '';
      }
      this.showServiceInput = false;
    },
    // 基础设施相关方法
    toggleBasicFacility(index) {
      this.roomData.basicFacilities[index].available = !this.roomData.basicFacilities[index].available;
    },
    addBasicFacility() {
      if (this.newBasicFacility.trim()) {
        this.roomData.basicFacilities.push({
          name: this.newBasicFacility.trim(),
          available: true
        });
        this.newBasicFacility = '';
      }
      this.showBasicInput = false;
    },
    // 卫浴设施相关方法
    toggleBathroomFacility(index) {
      this.roomData.bathroomFacilities[index].available = !this.roomData.bathroomFacilities[index].available;
    },
    addBathroomFacility() {
      if (this.newBathroomFacility.trim()) {
        this.roomData.bathroomFacilities.push({
          name: this.newBathroomFacility.trim(),
          available: true
        });
        this.newBathroomFacility = '';
      }
      this.showBathroomInput = false;
    },
    // 入住须知相关方法
    addNoticeRule() {
      this.roomData.noticeRules.push({ name: '', content: '' });
    },
    removeNoticeRule(index) {
      this.roomData.noticeRules.splice(index, 1);
    },
    // 位置信息相关方法
    addPoi() {
      this.roomData.location.pois.push({ name: '', distance: '' });
    },
    removePoi(index) {
      this.roomData.location.pois.splice(index, 1);
    },
    // 保存房间
    save_Room() {
      // 验证房间主图
      if (!this.roomData.mainImages || this.roomData.mainImages.length == 0) {
        this.$message.error('请上传房间主图');
        this.activeEditTab = 'basic'; // 切换到基本信息标签页
        return;
      }
      
      // 验证房屋特色
      if (!this.roomData.houseFeatures || this.roomData.houseFeatures.length == 0) {
        this.$message.error('请至少添加一个房屋特色');
        this.activeEditTab = 'features'; // 切换到房屋特色标签页
        return;
      }
      
      // 验证房屋特色名称
      const emptyFeatures = this.roomData.houseFeatures.filter(feature => !feature.name || feature.name.trim() === '');
      if (emptyFeatures.length > 0) {
        this.$message.error('请填写所有房屋特色的名称');
        this.activeEditTab = 'features'; // 切换到房屋特色标签页
        return;
      }
      
      // 实际项目中应该调用后端API保存数据
      this.roomData.id = this.roomId; // 如果有ID，则更新，否则新增
      if (this.roomData.id>0) {
        roomUpdate(this.roomData.id,this.roomData).then(res => {
          this.$message.success('房间保存成功');
        }).catch(err => {
          this.$message.error('房间保存失败');
        });
      } else {
        roomCreate(this.roomData).then(res => {
          this.$message.success('房间保存成功');
        }).catch(err => {
          this.$message.error('房间保存失败');
        });
      }
    },
    handleMainImgUpload(list) {
      // list为图片url数组
      this.roomData.mainImages = list.map(url => typeof url === 'string' ? { url } : url);
    },
    // 处理编辑区域标签页点击事件，滚动到对应的预览区域
    handleEditTabClick(tab) {
      // 定义编辑标签页与预览区域的映射关系
      const tabMapping = {
        'basic': 'overview',        // 基本信息 -> 概览
        'features': 'overview',     // 房屋特色 -> 概览
        'notice': 'notice',         // 入住须知 -> 须知  
        'facilities': 'facilities', // 服务设施 -> 设施
        'price': 'overview'         // 价格设置 -> 概览
      };

      const targetSection = tabMapping[tab.name];
      if (targetSection) {
        // 滚动到对应区域
        this.scrollToSection(targetSection);
      }
    }
  },
  components: {
    UploadImg
  }
}
</script>

<style scoped>
.room-detail-container {
  background: #f4f6fa;
  min-height: 100vh;
  padding: 0;
}

.sub-navbar {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 1;
}

.room-detail-wrapper {
  display: flex;
  gap: 32px;
  margin: 0 32px;
  padding-top: 32px;
}

.room-detail-card {
  flex: 1 1 340px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  padding: 32px 32px 24px 32px;
  margin-right: 0;
  overflow-y: auto;
  max-width: 700px;
  min-width: 320px;
  min-height: 400px;
}

.room-detail-header {
  margin-bottom: 20px;
}

.room-title {
  font-size: 22px;
  font-weight: bold;
  color: #222;
  line-height: 1.4;
}

.edit-tabs {
  margin-top: 16px;
}

.edit-form {
  margin-top: 24px;
}

.edit-form .el-form-item {
  margin-bottom: 24px;
}

.edit-form .el-form-item__label {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.edit-form .el-input,
.edit-form .el-input-number,
.edit-form .el-select {
  border-radius: 8px;
  font-size: 15px;
}



.score-label {
  margin-left: 15px;
  margin-right: 5px;
}

/* 房屋特色相关 */
.feature-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.feature-tags .el-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}

.tag-input {
  width: 120px;
  margin-right: 10px;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.feature-desc {
  margin-left: 10px;
  color: #666;
}

.feature-image-upload {
  margin-top: 10px;
}

/* 周边房源 */
.nearby-rooms {
  margin-bottom: 20px;
}

.nearby-room-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.nearby-room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.nearby-room-index {
  font-weight: bold;
  color: #409EFF;
}

/* 评分详情 */
.score-details-edit {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.score-detail-item {
  display: flex;
  align-items: center;
}

.score-detail-item span {
  width: 80px;
  margin-right: 10px;
}

/* 用户点评 */
.user-review-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.user-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-review-index {
  font-weight: bold;
  color: #409EFF;
}

/* 设施管理 */
.facilities-list-edit {
  margin-bottom: 15px;
}

.facility-item-edit {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.facility-item-edit .el-checkbox {
  margin-right: 10px;
}

.facility-item-edit .el-input {
  width: 200px;
  margin-right: 10px;
}

/* 房东信息 */
.positive-rate-suffix {
  margin-left: 5px;
}

/* 入住须知 */
.notice-rules {
  margin-bottom: 20px;
}

.notice-rule-item {
  border: 1px solid #ebeef5;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.notice-rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.notice-rule-index {
  font-weight: bold;
  color: #409EFF;
}

/* 位置信息 */
.location-info {
  margin-top: 10px;
}

.nearby-poi-item {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}

.nearby-poi-item .el-form-item {
  margin-right: 10px;
  margin-bottom: 0;
}

.nearby-poi-item .el-form-item:first-child {
  flex: 2;
}

.nearby-poi-item .el-form-item:nth-child(2) {
  flex: 1;
}

/* 价格设置 */
.price-unit {
  margin-left: 5px;
  color: #606266;
}



/* 右侧手机预览区域 - 全新改版，符合截图样式 */
.phone-preview {
  width: 375px;
  background: #2a2a2a;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  position: relative;
}

/* 预览区域操作按钮 */
.preview-actions {
  position: absolute;
  top: 0;
  right: -200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.preview-actions .el-button {
  width: 80px;
  height: 36px;
}

.phone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 5px 20px;
  font-size: 14px;
}

.phone-container {
  border-radius: 30px;
  height: 780px;
  overflow-y: auto;
  background: white;
  position: relative;
  scroll-behavior: smooth;
}

/* 隐藏滚动条但允许滚动 */
.phone-container::-webkit-scrollbar {
  display: none;
}

.phone-content {
  position: relative;
}

/* 顶部图片 */
.phone-top-image {
  position: relative;
  height: 250px;
  overflow: hidden;
}

.phone-top-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 返回、收藏分享和更多按钮 */
.phone-back-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
}

.phone-action-btns {
  position: absolute;
  top: 100px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  z-index: 5;
}

.action-btn {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
  cursor: pointer;
}

.phone-more-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  background: white;
  border-radius: 20px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 5;
}

.more-dots {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
}

.more-circle {
  width: 20px;
  height: 20px;
  background: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 房间信息卡片 */
.phone-room-card {
  background: white;
  border-radius: 15px;
  margin: -15px 15px 0;
  padding: 15px;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.phone-room-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.4;
}

.phone-room-tag-main {
  margin-bottom: 10px;
}

.phone-room-tag-main .tag-main {
  background: #fff2e8;
  color: #ff6b35;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
}

.phone-room-tag-main .desc {
  font-size: 13px;
}

.phone-room-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.phone-tag {
  background: #f5f5f5;
  color: #333;
  padding: 3px 10px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.phone-score-address {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

.phone-score {
  margin-bottom: 5px;
}

.phone-score .score-num {
  color: #ff6b35;
  font-size: 18px;
  font-weight: bold;
}

.phone-score .score-text {
  color: #ff6b35;
  margin-left: 5px;
}

.phone-score .review-count {
  color: #999;
  margin-left: 5px;
  font-size: 13px;
}

.phone-address {
  color: #333;
  margin-bottom: 5px;
  font-size: 14px;
}

.phone-distance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.distance-text {
  color: #999;
}

.map-link {
  color: #3498db;
}

/* 手机区域分区块样式 */
.phone-section {
  padding: 0 15px;
  position: relative;
}

.section-divider {
  height: 10px;
  background: #f5f5f5;
  margin: 20px -15px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0;
  color: #333;
}

/* 房屋特色 */
.phone-features {
  background: white;
  border-radius: 15px;
  margin: 15px 0;
  padding: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.feature-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.feature-recommend {
  background: #fff2e8;
  padding: 12px;
  border-radius: 8px;
  color: #ff6b35;
  margin-bottom: 15px;
  font-size: 14px;
}

.recommend-label {
  font-weight: 500;
}

.feature-item {
  margin-bottom: 20px;
}

.feature-item-title {
  font-weight: 500;
  margin-bottom: 5px;
  font-size: 15px;
}

.feature-item-desc {
  color: #666;
  font-size: 13px;
  margin-bottom: 8px;
}

.feature-item-image {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
}

.feature-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 底部栏 */
.phone-bottom-bar {
  position: fixed;
  bottom: 10px;
  width: 355px;
  display: flex;
  align-items: center;
  padding: 12px 15px;
  background: white;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  z-index: 20;
}

.bottom-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 12px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 3px;
}

.user-consult {
  font-size: 12px;
  color: #666;
}

.bottom-price {
  flex: 1;
}

.price-amount {
  color: #ff6b35;
  font-size: 20px;
  font-weight: bold;
}

.price-desc {
  font-size: 12px;
  color: #999;
}

.bottom-book-btn {
  background: #ff6b35;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: bold;
}

/* 顶部导航 */
.phone-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 30;
}

.phone-back-icon {
  font-size: 18px;
  color: #333;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-top-title {
  font-size: 16px;
  font-weight: bold;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 10px;
}

.phone-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #666;
}

.circle-icon {
  width: 20px;
  height: 20px;
  background: black;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* 标签导航 */
.phone-tab-nav {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  background: white;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 48px;
  z-index: 20;
}

.phone-tab-nav::-webkit-scrollbar {
  display: none;
}

.phone-tab-item {
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.phone-tab-item.active {
  color: #333;
  font-weight: bold;
}

.phone-tab-item.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15px;
  right: 15px;
  height: 2px;
  background: #333;
}

/* 服务设施样式 - 按照截图设计 */
.phone-facilities {
  padding: 15px 0;
  background: #fff;
}

.facilities-main-section {
  background: #fff;
}

.facilities-main-title {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  margin-bottom: 20px;
  padding-bottom: 8px;
}

.facilities-category {
  margin-bottom: 24px;
}

.facilities-category-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  padding-left: 2px;
}

.facilities-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 8px;
  align-items: start;
}

.facility-item-inline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 32px;
}

.facility-icon-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.facility-icon-circle.success {
  background: #67c23a;
  color: white;
}

.facility-icon-circle.muted {
  background: #e4e7ed;
  color: #909399;
}

.facility-name-inline {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  word-break: break-word;
}

.facility-name-inline.muted {
  color: #999;
}

.facilities-view-all {
  text-align: right;
  margin-top: 20px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
}

.facilities-view-all:hover {
  color: #666;
}

/* 房东介绍样式 */
.phone-landlord {
  padding: 15px 0;
}

.landlord-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.landlord-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.landlord-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.landlord-detail {
  flex: 1;
}

.landlord-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.landlord-desc {
  font-size: 13px;
  color: #666;
}

.landlord-contact {
  text-align: right;
}

.contact-btn {
  background: #ff6b35;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.landlord-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  padding: 15px 0;
  border-top: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b35;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 13px;
  color: #666;
}

.stat-desc {
  font-size: 12px;
  color: #999;
}

/* 房客点评样式 */
.phone-reviews {
  padding: 15px 0;
}

.reviews-header {
  margin-bottom: 20px;
}

.reviews-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.reviews-score {
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

.total-score {
  display: flex;
  align-items: baseline;
  margin-bottom: 15px;
}

.score-big {
  font-size: 24px;
  font-weight: bold;
  color: #ff6b35;
}

.score-label {
  font-size: 14px;
  color: #ff6b35;
  margin-left: 5px;
}

.score-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.score-name {
  font-size: 13px;
  color: #666;
}

.score-value {
  font-size: 14px;
  font-weight: bold;
  color: #ff6b35;
}

.review-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.reviewer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}

.reviewer-info {
  flex: 1;
}

.reviewer-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.review-date {
  font-size: 12px;
  color: #999;
  margin-top: 3px;
}

.review-content {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  overflow-x: auto;
}

.review-images::-webkit-scrollbar {
  display: none;
}

.review-image {
  width: 120px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}

.review-more {
  text-align: right;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
}

/* 费用须知样式 */
.phone-notice {
  padding: 0;
  padding-bottom: 40px;
}

.notice-section {
  margin-bottom: 25px;
}

.notice-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.notice-desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 15px;
}

.notice-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
}

.notice-label {
  font-weight: 500;
  color: #333;
}

.notice-value {
  color: #ff6b35;
}

.notice-more {
  text-align: right;
  font-size: 14px;
  color: #3498db;
  cursor: pointer;
  margin-top: 10px;
}

.notice-content {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin-top: 10px;
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
}

.notice-map {
  margin-top: 15px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: white;
}

.map-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.map-address {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: white;
  border-top: 1px solid #eee;
}

.map-icon {
  font-size: 18px;
  margin-right: 10px;
  color: #ff6b35;
}

.map-text {
  flex: 1;
  font-size: 13px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-copy {
  font-size: 13px;
  color: #3498db;
  cursor: pointer;
}

.map-tabs {
  display: flex;
  background: white;
  border-top: 1px solid #eee;
}

.map-tab {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.map-tab.active {
  color: #3498db;
  font-weight: bold;
  border-bottom-color: #3498db;
}

.map-pois {
  padding: 10px 15px;
  background: white;
  border-top: 1px solid #eee;
}

.map-poi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
}

.map-poi:last-child {
  border-bottom: none;
}

.poi-name {
  flex: 1;
}

.poi-distance {
  font-size: 12px;
  color: #999;
  margin-left: 10px;
}

/* 房源页面特有样式 */
.phone-recommend {
  padding: 0;
  padding-bottom: 40px;
}

.recommend-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-more {
  font-size: 13px;
  color: #999;
}

.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.recommend-card {
  width: calc(50% - 8px);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: white;
}

.recommend-image {
  height: 120px;
  position: relative;
}

.recommend-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recommend-distance {
  font-size: 12px;
  color: #666;
  margin: 8px 0 5px;
  padding: 0 8px;
}

.recommend-name {
  font-size: 13px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 36px;
}



.recommend-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 0 8px 8px;
  gap: 5px;
}

.recommend-tag {
  font-size: 11px;
  color: #3498db;
  background: #f0f8ff;
  padding: 1px 4px;
  border-radius: 2px;
}

.recommend-price {
  display: flex;
  align-items: baseline;
  padding: 8px;
  border-top: 1px solid #f5f5f5;
}

.recommend-current {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b35;
}

.recommend-original {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 5px;
}

.recommend-discount {
  font-size: 12px;
  color: white;
  background: #ff6b35;
  padding: 1px 4px;
  border-radius: 2px;
  margin-left: auto;
}



.address-display {
  display: flex;
  align-items: baseline;
  margin-bottom: 10px;
}

.address-text {
  font-size: 14px;
  color: #333;
  margin-right: 5px;
}

.distance-text {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.address-info {
  font-size: 14px;
  color: #909399;
  margin-left: 5px;
}

.main-image-tip,
.detail-image-tip {
  margin-bottom: 10px;
  color: #909399;
  font-size: 12px;
}

.image-upload-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.image-thumb {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  margin-right: 8px;
  margin-bottom: 8px;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.2s;
}

.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.image-thumb .btndel {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #f56c6c;
  background: #fff;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 2px;
  z-index: 2;
}

.image-thumb:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.upload-thumb {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  border: 1.5px dashed #bfcbd9;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bfcbd9;
  font-size: 28px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.upload-thumb:hover {
  border-color: #409eff;
  color: #409eff;
}

/* 服务设施编辑样式 */
.facilities-section {
  margin-bottom: 20px;
}

.facilities-tip {
  color: #909399;
  font-size: 12px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.facility-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  user-select: none;
}

.facility-item:hover {
  border-color: #c0c4cc;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.facility-item.active {
  border-color: #67c23a;
  background: #f0f9ff;
  color: #67c23a;
}

.facility-item.active:hover {
  border-color: #5cb85c;
  background: #e8f5e8;
}

.facility-item i {
  margin-right: 8px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.facility-item.active i {
  color: #67c23a;
}

.facility-item:not(.active) i {
  color: #f56c6c;
}

.facility-item span {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
}

.add-facility {
  margin-top: 8px;
}

.add-facility .el-input {
  max-width: 300px;
}

.add-facility .el-button--text {
  color: #409eff;
  font-size: 14px;
  padding: 8px 0;
}

.add-facility .el-button--text:hover {
  color: #66b1ff;
}

.add-facility .el-button--text i {
  margin-right: 4px;
}

/* 设施分类标题样式 */
.el-form-item__label {
  font-weight: 600;
  color: #303133;
}

/* 房屋特色编辑样式 */
.house-features {
  margin-bottom: 20px;
}

.house-feature-item {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  background: #fafbfc;
  transition: all 0.3s ease;
  position: relative;
}

.house-feature-item:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* 新增特色样式 */
.house-feature-item.feature-item-new {
  border-color: #67c23a;
  background: #f0f9ff;
  box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.1);
  animation: newFeatureGlow 2s ease-in-out;
}

@keyframes newFeatureGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(103, 194, 58, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}

/* 编辑状态样式 */
.house-feature-item.feature-item-editing {
  border-color: #409eff;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(64, 158, 255, 0.15);
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.feature-index {
  font-weight: 600;
  color: #409eff;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feature-index .el-icon-star-on {
  color: #67c23a;
  animation: starSpin 2s ease-in-out;
}

@keyframes starSpin {
  0% { transform: scale(0) rotate(0deg); }
  50% { transform: scale(1.2) rotate(180deg); }
  100% { transform: scale(1) rotate(360deg); }
}

.feature-actions {
  display: flex;
  gap: 8px;
}

/* 预览模式样式 */
.feature-preview {
  padding: 0;
}

.preview-content {
  cursor: pointer;
  padding: 16px;
  border-radius: 6px;
  border: 2px dashed transparent;
  transition: all 0.2s ease;
}

.preview-content:hover {
  border-color: #409eff;
  background: rgba(64, 158, 255, 0.05);
}

.preview-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
  min-height: 24px;
}

.preview-name:empty::before {
  content: "点击编辑特色名称";
  color: #c0c4cc;
  font-weight: normal;
  font-style: italic;
}

.preview-desc {
  font-size: 14px;
  color: #606266;
  margin-bottom: 12px;
  min-height: 20px;
  line-height: 1.4;
}

.preview-desc:empty::before {
  content: "点击添加特色描述";
  color: #c0c4cc;
  font-style: italic;
}

.preview-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  border: 2px dashed #d3d4d6;
  border-radius: 4px;
  color: #c0c4cc;
  font-size: 12px;
  gap: 6px;
  transition: all 0.2s ease;
}

.preview-placeholder:hover {
  border-color: #409eff;
  color: #409eff;
}

/* 编辑模式样式 */
.feature-edit {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

.upload-thumb-active {
  background: linear-gradient(45deg, #409eff, #67c23a);
  color: white;
  border: none;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.upload-thumb-active:hover {
  background: linear-gradient(45deg, #337ecc, #5daf34);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.upload-tips {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  text-align: center;
}

.house-feature-item .el-form-item {
  margin-bottom: 16px;
}

.house-feature-item .el-form-item:last-child {
  margin-bottom: 0;
}

.house-feature-item .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
}

.house-feature-item .el-input__inner {
  border-radius: 6px;
  font-size: 14px;
}

.feature-tip {
  color: #909399;
  font-size: 12px;
  margin-bottom: 16px;
  line-height: 1.4;
  padding: 8px 12px;
  background: #f4f6fa;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.add-feature-button {
  text-align: center;
  margin-top: 16px;
  padding: 16px;
  border: 2px dashed #e4e7ed;
  border-radius: 8px;
  background: #fafbfc;
  transition: all 0.3s ease;
}

.add-feature-button:hover {
  border-color: #409eff;
  background: #f0f8ff;
}

.add-tip {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .facilities-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .facility-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .facility-item i {
    font-size: 14px;
    margin-right: 6px;
  }

  .house-feature-item {
    padding: 16px;
    margin-bottom: 16px;
  }
}
</style>
